<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>菜鸟教程(runoob.com)</title>
        <link rel="stylesheet" href="../CSS/WebLayout.css">
    </head>

    <body>
        <div class="topnav">
            <a href="#">链接</a>
            <a href="#">链接</a>
            <a href="#">链接</a>
            <a href="#" style="float: right;">链接</a>
        </div>

        <div class="row">
            <div class="leftcolumn">
                <div class="card">
                    <h2>文章标题</h2>
                    <h5>2019年4月17日</h5>
                    <div class="fakeimg" style="height: 200px;">图片</div>
                    <p>一些文本...</p>
                    <p>菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！</p>
                </div>

                <div class="card">
                    <h2>文章标题</h2>
                    <h5>2019年4月17日</h5>
                    <div class="fakeimg" style="height: 200px;">图片</div>
                    <p>一些文本...</p>
                    <p>菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！</p>
                </div>

                <div class="rightcolumn">
                    <div class="card">
                        <h2>关于我</h2>
                        <div class="fakeimg" style="height: 100px;">图片</div>
                        <p>关于我的一些信息...</p>
                    </div>
                    <div class="card">
                        <h3>热门文章</h3>
                        <div class="fakeimg"><p>图片</p></div>
                        <div class="fakeimg"><p>图片</p></div>
                        <div class="fakeimg"><p>图片</p></div>
                    </div>
                    <div class="card">
                        <h3>关注我</h3>
                        <p>一些文本</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer">
            <h2>底部区域</h2>
        </div>
    </body>
</html>